<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-form ref="book" :model="book" label-width="120px" v-loading.fullscreen.lock="fullscreen">
                <el-form-item label="书籍名称">
                    <el-input v-model="book.name"></el-input>
                </el-form-item>
                <el-form-item label="作者名称">
                    <el-input v-model="book.author"></el-input>
                </el-form-item>
                <el-form-item label="书籍封面">
                    <el-upload class="avatar-uploader" :data="pic" :action="getLocation" v-loading.fullscreen.lock="fullscreenLoading" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="book.img" :src="ip+book.img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="tips">建议尺寸: 150*200像素</span>
                </el-form-item>
                <el-form-item label="选择分类">
                    <el-select v-model="book.type_id" placeholder="请选择书籍类型">
                        <el-option v-for="a_type in bookTypes" :key="a_type.id" :label="a_type.name" :value="a_type.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="点击上传书籍">
                    <el-upload :file-list="filelist" :data="game_zip" :accept="accept_file" :limit="limit" :action="get_video_Location" list-type="picture" v-loading.fullscreen.lock="fullscreenLoading" :on-success="list_handleAvatarSuccess" :on-remove="zip_remove" :before-upload="beforeAvatarUpload_zip">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="书籍url">
                    <el-input v-model="book_url" disabled></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add('book')">保存</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { pic_location, ip, movie_location } from '../../utils/local.js'
import { editBook } from '../../api/server.js'
import { mapState } from 'vuex'

export default {
    data() {
        return {
            fullscreen: false,
            fullscreenLoading: false,
            getLocation: pic_location,
            get_video_Location: movie_location,
            pic: {},
            filelist: [],
            game_zip: {},
            book_url: "",
            ip: ip,
            limit: 1,
            accept_file: 'text/plain,application/pdf'
        }
    },
    created() {
        let book = this.book
        if (book.book_url) {
            let obj = {}
            obj.name = book.book_url.split('/').pop()
            obj.url = book.book_url
            this.filelist.push(obj)
        }
    },
    computed: mapState({
        book: state => state.Third.book,
        bookTypes: state => state.Third.bookTypes
    }),
    watch: {
        filelist: function (value) {
            console.log('value', value)
            this.book_url = value.length > 0 ? value[0].url : ''
        }
    },
    methods: {
        handleAvatarSuccess(res) {
            if (res.code === '000000') {
                this.fullscreenLoading = false
                this.book.img = res.result.filePath
            }
        },
        beforeAvatarUpload(file) {
            console.log('上传')
            this.pic.pictureFile = file
            this.pic.width = 150 * 3
            this.pic.height = 200 * 3
            return this.upload(file)
        },
        beforeAvatarUpload_zip(file) {
            console.log('file:', 'text/plain', file.type)
            if (file.type !== 'application/pdf' && file.type !== 'text/plain') {
                this.$message.error("只能上传pdf/txt格式")
                return
            }
            this.game_zip.movieFile = file
            return this.upload(this.game_zip)
        },
        upload(file) {
            this.fullscreenLoading = true
        },
        add(from) {
            let book = this.book
            console.log('book', book)
            if (book.name == undefined || book.name.length == 0) {
                this.$message.error('请输入书籍名称')
                return
            }
            if (book.author == undefined || book.author.length == 0) {
                this.$message.error('请输入作者名称')
                return
            }
            if (book.img == undefined || book.img == '') {
                this.$message.error('请上传书籍封面')
                return
            }
            if (this.filelist.length == 0) {
                this.$message.error('请上传书籍')
                return
            }
            book.book_url = this.filelist[0].url
            book.book_name = this.filelist[0].name
            editBook(book)
                .then(res => {
                    this.$message.success('修改成功')
                })
        },
        list_handleAvatarSuccess(res) {
            if (res.code === '000000') {
                let obj = {}
                obj.name = res.result.fileName
                obj.url = res.result.filePath
                this.filelist.push(obj)
                this.fullscreenLoading = false
            }
        },
        zip_remove(file, filelist) {
            this.filelist = []
        },
        back() {
            this.$router.go(-1)
        }
    },

}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}
.avatar-uploader {
  width: 150px;
  height: 200px;
  border: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  text-align: center;
  margin-top: 1%;
}
.avatar-uploader .el-upload {
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 200px;
  display: block;
}
.tips {
  color: gray;
  margin-left: 5%;
}
</style>